<div id="layout-cadastro">
    <h1>Cadastro de usuário</h1><br>
    <form action="./pages/enviar.php" method="post" name="form_cadastro" enctype="multipart/form-data">
        <fieldset style="margin: auto; width: 540px; height: auto; ">
            <legend>Dados Pessoais</legend>
            <table style="width: 520px;" cellspacing=10 >
                    <tr>
                        <td>
                            <label>Tipo Pessoa</label>
                        </td>
                        <td>
                            <input type="radio" name="tipoPessoa" value="0" onclick="mostrarCampos(this)" class="txtInput" checked />Jurídica
                            <input type="radio" name="tipoPessoa" value="1" onclick="mostrarCampos(this)" class="txtInput"/>Física
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>CPF/CNPJ</label>
                        </td>
                        <td>
                            <input style="width: 100%" class="txtInput" type="text" id='usuario' name="usuario" onchange="verifica_digitos(this)" onKeydown="mascara(this, mascaraCpfCnpj);" maxlength="18" required />
                        </td>
                        <td class="atributoPJ">
                            <label>IE</label>
                        </td>
                        <td class="atributoPJ">
                            <input type="text" class="txtInput" id="inscMunicipal" name="inscMunicipal" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 30%;">
                            <label>Nome</label>
                        </td>
                        <td>
                            <input style="width: 100%;" class="txtInput" type="text" id="nomeCompleto" name="nomeCompleto" />
                        </td>
                    </tr>
                    <tr class="atributoPJ">
                        <td>
                            <label>Razão Social</label>
                        </td>
                        <td>
                            <input type="text"class="txtInput" id="razaoSocial" name="razaoSocial" />
                        </td>
                    </tr>
                    <tr class="atributoPJ">
                        <td>
                            <label style="white-space: nowrap">Nome Fantasia</label>
                        </td>
                        <td>
                            <input type="text" class="txtInput" id="nomeFantasia" name="nomeFantasia" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Endereço</label>
                        </td>
                        <td>
                            <input type="text" class="txtInput" id="endereco" name="endereco" />
                        </td>
                        <td>
                            <label>Nº</label>
                        </td>
                        <td>
                            <input type="text" class="txtInput" id="numEndereco" name="numEndereco" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Complemento</label>
                        </td>
                        <td>
                            <input type="text" class="txtInput" id="complEndereco" name="complEndereco" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Bairro</label>
                        </td>
                        <td>
                            <input type="text" class="txtInput" id="bairro" name="bairro" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label> Estado </label>
                        </td>
                        <td width=100%>
                            <select name="estado" id="estado" class="txtInput">
                                <option value="0">Escolher tipo</option>
                                <?php
                                mysql_connect('localhost:3306', 'root', '');
                                mysql_select_db('mydb');
                                $result = mysql_query("SELECT * FROM estado ORDER BY sigla ASC");
                                while ($row = mysql_fetch_array($result)) {
                                    echo "<option value='" . $row['idEstado'] . "'>" . $row['sigla'] . "</option>";
                                }
                                ?>
                            </select>
                        </td>

                        <td>
                            <label>Cidade</label>
                        </td>
                        <td width=100%>
                            <select id="cidade" name="cidade" id="cidade" class="txtInput">
                                <option value="0" selected="selected">Aguardando tipo...</option>
                            </select>
                        </td>
                    </tr>


                    <tr>
                        <td>
                            <label>CEP</label>
                        </td>
                        <td>
                            <input type="text" class="txtInput" id="cep" name="cep" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>E-mail</label>
                        </td>
                        <td>
                            <input style="width: 100%;" id="email" class="txtInput" type="email" name="email" required />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Telefone</label>
                        </td>
                        <td>
                            <input style="width: 100%;" id="telefone" class="txtInput" type="text" name="telefone" required />
                        </td>
                    </tr>
                </table>

        </fieldset>
        <br>
        <fieldset style="margin: auto; width: 540px; height: auto;">
            <legend>Dados de Acesso</legend>

            <table style="width: 520px;">
                <tbody>
                    <tr>
                        <td style="width: 30%;">
                            <label>Senha</label>

                        </td>
                        <td style="font-size: 10px" >
                            <input size="16" id="senha" class="txtInput" type="password" id="senha" name="senha" maxlength="16" onchange="valida_senha()" required />
                            <img id="icone1" style="display: none" width=15 height=15 >
                            <br>Digite entre 4-16 caracteres

                        </td>
                    </tr>
                    
                    <tr>
                        <td>
                            <label>Confirmar Senha</label>
                        </td>
                        <td>
                            <input size="16" id="senha1" class="txtInput" type="password" name="senha" onchange="valida_senha()" required />
                            <img id="icone2" style="display: none" width=15 height=15 >
                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <br>
        <input class="inputButton" type="button" value="Cadastrar" onclick="form_submit()" />
        <input class="inputButton" type="reset" value="Limpar Campos"/>
        <script type="text/javascript">

            $(document).ready(function(){
                $('#estado').change(function(){
                    $('#cidade').load('./pages/cidades.php?estado='+$('#estado').val() );
                });
            });
                                        
            function mostrarCampos(obj){
                var tipo = obj.value;
                var elementos = document.querySelectorAll('.atributoPJ');
                if(tipo==1){
                    for (var i = 0; i < elementos.length; i++) {
                        elementos[i].style.display = 'none';
                    }
                }else{
                    for (var i = 0; i < elementos.length; i++) {
                        elementos[i].style.display = '';
                    }
                }
            }
			
            function valida_senha(){
                var senha = document.getElementById('senha');
                var senha_conf = document.getElementById('senha1');
                var img_s1 = document.getElementById('icone1');
                var img_s2 = document.getElementById('icone2');
								
                if(senha.value.length >= 4){
                    img_s1.style.display = 'inline';
                    img_s1.src = 'imagens/tick_ok.png';
                }else{
                    img_s1.style.display = 'inline';
                    img_s1.src = 'imagens/tick_wrong.gif';
                }
				
                if((senha.value == senha_conf.value) && senha_conf.value.length >=4){
                    img_s2.style.display = 'inline';
                    img_s2.src = 'imagens/tick_ok.png';
                    return true;
                }else{
                    img_s2.style.display = 'inline';
                    img_s2.src = 'imagens/tick_wrong.gif';
                    return false;
                }
				
            }
			
            function verificar_campos(){
                var campo = new Array(3);
                campo[0] = document.getElementById('usuario').value;
                campo[1] = document.getElementById('email').value;
                campo[2] = document.getElementById('senha').value;
                        
                for(i=0; i<campo.length; i++){
					
                    if(campo[i] == ''){
                        return false;
                    }
                }
                return true;
            }
			
					
            function form_submit(){
                if((verificar_campos()) && valida_senha()){
                    document.form_cadastro.submit();
                }else{
                    alert('Preencha os dados corretamente!');
                }
            }

			
        </script>
    </form>
</div>